<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div id="demoColorPicker"></div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["colorpicker"], function () {
        var colorpicker = layui.colorpicker;
        colorpicker.render({
          // 2.4+ ie10+
          elem: "#demoColorPicker",
          // color: "red", // 默认颜色 注意格式要和 format 相同 否则颜色对 色值不对
          format: "rgb", // 颜色显示/输入格式，可选值： hex、rgb 若在 rgb 格式下开启了透明度，格式会自动变成 rgba。
          alpha: true, // 是否开启透明度 format 必须设置为 rgb
          predefine: true, //	预定义颜色块是否开启
          // colors:[] , // 预定义颜色
          size: "xs", // 下拉框大小(触发事件的那个框)，可以选择：lg、sm、xs。
          change: function (color) {
            // 颜色被改变的回调
            console.log(color);
          },
          done: function (color) {
            // 颜色选择后的回调
            console.log(color);
            //譬如你可以在回调中把得到的 color 赋值给表单
          },
        });
      });
    </script>
  </body>
</html>
